<template>
	<!-- 跟着老师敲得check1页面 -->
	<view class="check">
		<!-- :model="formData" :rules="rules" 这两个配合校验  -->
		<!--labelPosition 提示文字位置   label 提示文字内容 labelWidth 提示文字宽度 :labelStyle="{fontWeight:'bold',marginBottom:'20rpx'}" 提示文字自定义样式！！-->
		<!-- ref 提交校验 拿到对应标签一般是表单的dom结点，提交的时验证表单是否为空-->
		<u--form :model="formData" ref="uForm" :rules="rules" labelPosition="top"
			:labelStyle="{fontWeight:'bold',marginBottom:'20rpx'}">
			<!-- 1.输入框 -->
			<!-- 输入姓名 -->
			<u-form-item prop="" label="姓名">
				<u--input v-model="name" disabled placeholder="请输入姓名" border="surround" clearable></u--input>
			</u-form-item>
			<!-- 2.单项选择器 -->
			<!--  是否接触过可疑人员-->
			<u-form-item labelWidth="auto" prop="" label="是否接触过可疑人员">
				<u-radio-group v-model="formData.contact">
					<u-radio :customStyle="{marginRight: '20rpx'}" label="是" :name="true"></u-radio>
					<u-radio label="否" :name="false"></u-radio>
				</u-radio-group>
			</u-form-item>
			<!--  最近14天是否去过中高风险地区-->
			<u-form-item labelWidth="auto" prop="" label="最近14天是否去过中高风险地区">
				<u-radio-group v-model="formData.dangerArea">
					<u-radio :customStyle="{marginRight: '20rpx'}" label="是" :name="true"></u-radio>
					<u-radio label="否" :name="false"></u-radio>
				</u-radio-group>
			</u-form-item>
			<!-- 从何处来 -->
			<u-form-item prop="fromAddress" label="从何处来" labelWidth="auto">
				<u--input v-model="formData.fromAddress" placeholder="请输入内容" border="surround" clearable></u--input>
			</u-form-item>
			<!-- 现居地址 -->
			<u-form-item prop="nowAddress" label="现居地址" labelWidth="auto">
				<u--input v-model="formData.nowAddress" placeholder="请输入内容" border="surround" clearable></u--input>
			</u-form-item>
			<!-- 身体状况 -->
			<u-form-item labelWidth="auto" prop="" label="是否接触过可疑人员">
				<u-radio-group v-model="formData.status">
					<u-radio :customStyle="{marginRight: '20rpx'}" v-for="(item) in statusList" :label="item.label"
						:name="item.name" :key="item.name">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<!-- 今日体温 -->
			<!-- prop最好和v-model同名，写"formData.temperature"的后半部分：temperature即可！！ -->
			<u-form-item prop="temperature" label="今日体温" labelWidth="auto">
				<u--input v-model="formData.temperature" placeholder="请输入体温" border="surround" clearable></u--input>
			</u-form-item>
			<!-- 疫苗接种情况 -->
			<u-form-item labelWidth="auto" prop="" label="疫苗接种情况">
				<u-radio-group v-model="formData.vaccin">
					<u-radio :customStyle="{marginRight: '20rpx'}" v-for="(item) in vaccinList" :label="item.label"
						:name="item.name" :key="item.name">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<!-- <u-button @click="submit" type="primary" text="提交"></u-button> -->
			<view class="btn" @click="submit">提交</view>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusList: [{
					// label单选框的提升文字 name实际的值
						label: "普通",
						name: 0
					},
					{
						label: "发烧",
						name: 1
					}, {
						label: "疑似",
						name: 2
					}, {
						label: "确诊",
						name: 3
					}, {
						label: "居家隔离",
						name: 4
					}
				],
				vaccinList: [{
						label: "未接种",
						name: 0
					},
					{
						label: "一针",
						name: 1
					}, {
						label: "两针",
						name: 2
					}, {
						label: "三针",
						name: 3
					},
				],
				formData: {
					contact: false,
					dangerArea: false,
					fromAddress: "",
					nowAddress: "",
					status: 0,
					temperature: "",
					userId: "",
					vaccin: 0
				},
				rules: {
					'fromAddress': {
						type: 'string',
						required: true,
						message: '请填写内容',
						// 不希望表单重置后还有提示，去掉change
						trigger: ['blur']
					},
					'nowAddress': {
						type: 'string',
						required: true,
						message: '请填写内容',
						trigger: ['blur']
					},
					'temperature': {
						type: 'string',
						required: true,
						message: '请填写内容',
						trigger: ['blur']
					},
				},
				name: ''

			}
		},
		methods: {
			// 1.提交校验方法
			submit() {
				// 1.ref 配合 2.this.$refs.xx.....检验表单是否填写完
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					this.addCheckInfo()

				}).catch(errors => {
					uni.$u.toast('请完整填写所有内容')
				})
			},
			// 2.获取用户名方法
			getUserName(id) {
				uni.request({
					// 模板字符串 1.`` 反引号包裹全部 2.${参数}
					url: `http://blog.coldworld.top:8081/user/getuser/${id}`,
					success: (res) => {
						// console.log(res)
						this.name = res.data.data.data.username
						
					}

				})
			},
			// 3.发起添加信息请求 提交数据的方法
			addCheckInfo() {
				uni.request({
					url: "http://blog.coldworld.top:8081/healthinfo/add",
					method: "POST",
					data: this.formData,
					success: (res) => {
						// console.log(res)
						// let msg = res.data.message
						let msg = '请正确输入温度'
						if (res.data.code == 20000) {
							uni.$u.toast('提交成功')
							setTimeout(() => {
								// 1s后跳转到首页
								uni.switchTab({
									url: "../index/index"
								})
							}, 1000)
							this.$refs.uForm.resetFields()
						} else {
							uni.showToast({
								title: msg,
								icon: "error",
							})
						}
					}
				})
			}


		},
		// 生命周期函数
		onLoad() {
			let id = uni.getStorageSync('id')
			// console.log('用户id：' + id)
			// 如果id不存在，重定向到登录页，让用户登录
			// id存在，赋值 通过id获取 用户名显示在姓名输入框
			if (id) {
				this.formData.userId = id
				this.getUserName(id)
			} else {
				uni.showToast({
					title: "请先登录",
					icon: "error"
				})

				setTimeout(() => {
					// 1s后重定向到登录页
					uni.redirectTo({
						url: "../login/login"
					})
				}, 1500)
			}


		}
	}
</script>

<style lang="scss">
	.check {
		padding: 20rpx;

		.btn {
			height: 100rpx;
			border-radius: 10rpx;
			background-color: #1269db;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			margin-top: 20rpx;
		}
	}
</style>
